<template>
    <div class="search-box">
        <!-- <div class="search-left" v-show="$route.path=='/home'">
            <i class="iconfont icon-message"></i>
        </div> -->
        <div class="search-left" @click="$router.back()" v-show="$route.path!='/home'">
            <i class="iconfont icon-left"></i>
        </div>
        <div class="search-input">
            <input type="text" v-model="search">
        </div>
        <!-- <component :is="page"></component> -->
        <!-- <router-link tag="div" class="search-right" v-show="$route.path=='/search'"
            :to="{path:'searchGood',query:{q:search}}"
            @mousedown="setHistory(search)"
        >搜索</router-link> -->
        <div class="search-right" v-show="$route.path=='/search'"
            @click="goToSearchGood(search)"
        >搜索</div>
        <div class="search-right" v-show="$route.path=='/searchGood'">
            <router-link to="/cart" tag="i" class="iconfont icon-cart"></router-link>
            <!-- <i class="iconfont icon-cart"></i> -->
            <!-- 搜索 -->
        </div>
    </div>
</template>
<script>
import {mapState,mapActions} from "vuex";
export default {
    computed:{
        ...mapState(["search"]),
        search:{
            get(){
                return this.$store.state.search;
            },
            set(nv){
                this.$store.commit("setSearch",nv);
            }
        }
    },
    methods:{
        ...mapActions(["loadHotWordAndSearch"]),
        goToSearchGood(search){
            this.$store.commit("setHistory",search);
            this.$router.push({
                path:'searchGood',
                query:{
                    q:search
                }
            });
        }
    },
    mounted(){
        this.loadHotWordAndSearch();
    }
}
// import FindForSearch from "./findForSearch";
// import CartForSearch from "./cartForSearch";
// export default {
//     components:{
//         FindForSearch,CartForSearch
//     },
//     data(){
//         return{
//             page:"FindForSearch"
//         }
//     },
//     mounted(){
//         if(this.$route.path=="/search"){
//             console.log(1);
//             this.page="FindForSearch";
//         }else{
//             console.log(2);
//             this.page="CartForSearch";
//         }
//     }
// }
</script>

<style lang="less" scoped>
//首页头部搜索栏样式
.search-box {
    position:fixed;
    top:0;
    width:100%;
    z-index:99;
    box-sizing:border-box;
    height: @topHeight;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: @white;
    > .search-left {
        flex: 1;
        text-align: center;
        cursor:pointer;
        > i {
            font-size: 0.5rem;
            font-weight: bold;
            color: @dark;
            opacity:0.7;
        }
    }
    > .search-input {
        flex: 3;
        box-sizing:border-box;
        // padding: 0rem 0.2rem;
        > input[type="text"] {
            width: 100%;
            height: @topHeight - 0.4rem;
            border: none;
            border-radius:10px;
            box-sizing:border-box;
            background-image: url("");
            background-size: 0.4rem;
            background-repeat: no-repeat;
            background-color: @gray-ee;
            background-position: left center;
            padding-left: 0.4rem;
            &:focus{
                background-image:none;
                outline:none;
            }
        }
    }
    > .search-right {
        flex: 1;
        text-align: center;
        cursor:pointer;
        > i {
            font-size: 0.5rem;
            font-weight: bold;
            color: @dark;
            opacity:0.7;
        }
    }
}
</style>